<template>
  <div class="box">
    <Panel />
    <div>
      <div class="finditem">
        文章标题
        <input v-model="fitemBytitle" />
        <button @click="finditem()">
          <i class="iconfont icon-sousuo"></i>
        </button>
      </div>
      <div style="display:flex">
        <div class="del-btn" style="text-align: center;" @click="deleteitems">删除</div>
        <div class="add-btn" style="text-align: center;" @click="showdialog=true ,isadd=true">添加</div>
        <div class="add-btn" style="text-align: center;" @click="addmanyitem">10条数据</div>
      </div>
      <!-- 表头 -->
      <div class="title">
        <div class="title-item">
          <input type="checkbox" v-model="isAll" @change="allitem" /> 全选
        </div>
        <div class="title-item">
          <i class="iconfont icon-wenzhang-copy"></i>文章ID
          <i class="iconfont icon-paixu" @click="sortById"></i>
        </div>
        <div class="title-item">
          <i class="iconfont icon-wenzhang-biaoti-xuanzhong"></i>文章标题
        </div>
        <div class="title-item">
          <i class="iconfont icon-wenzhangbiaoqian"></i>文章标签
        </div>
        <div class="title-item">
          <i class="iconfont icon-wenzhang-zuozhe"></i>文章作者
        </div>
        <div class="title-item">
          <i class="iconfont icon-caozuo"></i>操作
        </div>
      </div>
      <!-- 表头
      表身-->
      <div class="body" v-for="item in aticleList" :key="item.id">
        <div class="body-item">
          <input type="checkbox" v-model="item.isCheck" />
        </div>
        <div class="body-item">{{item.id}}</div>
        <div class="body-item">{{item.title}}</div>
        <div class="body-item">{{item.label}}</div>
        <div class="body-item">{{item.author}}</div>
        <div class="body-item">
          <div class="btn-box">
            <div
              class="add-btn"
              @click="showdialog = true,isadd = false,cid=item.id,edititem(item.id)"
            >编辑</div>
            <div class="del-btn" @click="deleteitem(item.id)">删除</div>
          </div>
        </div>
      </div>
      <!-- 表身 -->
      <!-- <div
        v-for="item in totalpage"
        @click="changepage(item)"
        :class="['page',currentPage==item ? 'page-active':'']"
        :key="item"
      >{{item}}</div>-->
      <el-pagination
        background
        layout="prev, pager, next"
        :page-count="totalpage"
        :current-page="currentPage"
        @current-change="changepage"
      />Go to
      <el-input
        v-model="currentPage"
        style="width: 240px"
        placeholder="Please input"
        @change="changepage(currentPage)"
      />

      <div>当前一共 {{totalcount}} 条数据</div>
    </div>

    <!-- 对话框 -->
    <transition name="fade">
      <div class="dialog" v-if="showdialog">
        <div class="dialog-title">
          <i class="iconfont icon-guanbi" @click="enddialog"></i>
        </div>
        <div class="dialog-body">
          <div class="dialog-item">
            <span class="lable">文章ID:</span>
            <input class="ipt" type="text" v-model="nid" />
          </div>
          <div class="dialog-item">
            <span class="lable">文章标题:</span>
            <input class="ipt" type="text" v-model="ntitle" />
          </div>
          <div class="dialog-item">
            <span class="lable">文章标签:</span>
            <input class="ipt" type="text" v-model="nlabel" />
          </div>
          <div class="dialog-item">
            <span class="lable">文章作者:</span>
            <input class="ipt" type="text" v-model="nauthor" />
          </div>
          <div>
            <button class="btn" @click="additem" v-if="isadd">添加</button>
            <button class="btn" @click="modifyitem" v-else>保存</button>
            <button class="btn" @click="enddialog">取消</button>
          </div>
        </div>
      </div>
    </transition>
    <!-- 对话框 -->
  </div>
</template>

<script>
import Panel from "./Panel.vue";

export default {
  components: { Panel },

  data() {
    return {
      searchKey: "",
      cid: -1, // 正在被操作的文章ID
      nid: "", // 文章ID
      ntitle: "", // 文章标题
      nlabel: "", // 文章标签
      nauthor: "", // 文章作者
      showdialog: false, // 控制对话框的显示与隐藏
      isadd: false, // 控制对话框的显示与隐藏
      fitemBytitle: "",
      isAll: false,
      isasc: true,
      aticleList: [],
      currentPage: 1,
      totalpage: 0,
      totalcount: 0
    };
  },
  methods: {
    changepage(page) {
      this.currentPage = page;
      console.log(page);
      this.$http.get("/v1/test/getArticle?page=" + page).then(res => {
        console.log(res);
        this.aticleList = res.data.data.list;
        this.totalcount = res.data.data.total;
      });
    },
    addmanyitem() {
      for (var i = 0; i < 10; i++) {
        this.$http
          .post("/v1/test/addArticle", {
            id: "文章id" + i,
            title: "文章标题" + i,
            label: "文章标签" + i,
            author: "文章作者" + i
          })
          .then(res => {
            console.log(res);
          })
          .catch(err => {
            alert("添加失败");
          });
      }
      //添加完成再次查询
      this.updatatable();
    },
    updatatable() {
      this.$http
        .get("/v1/test/getArticle?page=" + this.currentPage)
        .then(res => {
          console.log(res);
          // this.aticleList = res.data.rows;
          this.totalcount = res.data.data.total;
          this.totalpage = Math.ceil(this.totalcount / 5);
          this.aticleList = res.data.data.list;
        });
    },
    edititem(id) {
      let index = this.aticleList.findIndex(item => item.id == id);
      this.nid = this.aticleList[index].id;
      this.ntitle = this.aticleList[index].title;
      this.nlabel = this.aticleList[index].label;
      this.nauthor = this.aticleList[index].author;
    },
    // 关闭对话框
    enddialog() {
      this.showdialog = false;
      this.nid = "";
      this.ntitle = "";
      this.nlabel = "";
      this.nauthor = "";
    },
    // 添加文章
    additem() {
      if (
        this.nid == "" ||
        this.ntitle == "" ||
        this.nlabel == "" ||
        this.nauthor == ""
      ) {
        alert("输入项不能为空");
        return;
      }
      // let obj = {
      //   id: this.nid,
      //   title: this.ntitle,
      //   label: this.nlabel,
      //   author: this.nauthor
      // };

      this.$http
        .post("/v1/test/addArticle", {
          id: this.nid,
          title: this.ntitle,
          label: this.nlabel,
          author: this.nauthor
        })
        .then(res => {
          //添加完成再次查询
          this.updatatable();
          alert("添加成功");
        })
        .catch(err => {
          alert("添加失败");
        });
      // this.aticleList.push(obj);

      this.showdialog = false;
      this.nid = "";
      this.ntitle = "";
      this.nlabel = "";
      this.nauthor = "";
    },
    // 删除文章
    deleteitem(id) {
      // let index = this.aticleList.findIndex(item => item.id == id);
      // console.log(index);
      // this.aticleList.splice(index, 1);

      this.$http
        .post("/v1/test/deleteArticle", {
          id: id
        })
        .then(res => {
          //再次查询
          this.updatatable();
          alert("删除成功");
        })
        .catch(err => {
          alert("删除失败");
        });
    },
    // 修改文章
    modifyitem() {
      for (var i in this.aticleList) {
        if (this.aticleList[i].id == this.nid && this.nid != this.cid) {
          alert("文章ID已存在");
          return;
        }
      }
      // this.aticleList.map(item => {
      //   if (item.id == this.cid) {
      //     item.id = this.nid;
      //     item.title = this.ntitle;
      //     item.label = this.nlabel;
      //     item.author = this.nauthor;
      //   }
      // });
      this.$http
        .post("/v1/test/editArticle", {
          id: this.nid,
          title: this.ntitle,
          label: this.nlabel,
          author: this.nauthor
        })
        .then(res => {
          //再次查询
          this.updatatable();
          alert("编辑成功");
        })
        .catch(err => {
          alert("编辑失败");
        });

      this.showdialog = false;
      this.nid = "";
      this.ntitle = "";
      this.nlabel = "";
      this.nauthor = "";
      this.cid = -1;
    },
    finditem() {
      console.log(this.fitemBytitle);
      this.aticleList = this.aticleList.filter(item => {
        return item.title.includes(this.fitemBytitle);
      });
    },
    deleteitems() {
      // this.aticleList = this.aticleList.filter(item => {
      //   return !item.isCheck;
      // });
      // for(var i=0;i<this.aticleList.length;i++){
      //   if(this.aticleList[i].isCheck){
      //     this.$http.post("/v1/test/deleteArticle",{
      //   id:id
      //   }).then(res=>{
      //     console.log(this.aticleList[i].id+"删除成功")
      //   }).catch(err=>{
      //     console.log(this.aticleList[i].id+"删除失败"+err)
      //   })
      //   }
      // }

      this.aticleList.forEach(item => {
        if (item.isCheck) {
          this.$http
            .post("/v1/test/deleteArticle", {
              id: item.id
            })
            .then(res => {
              console.log(item.id + "删除成功");
            })
            .catch(err => {
              console.log(item.id + "删除失败" + err);
            });
        }
      });

      this.updatatable();
    },
    allitem() {
      if (this.isAll) {
        this.aticleList.map(item => {
          item.isCheck = true;
        });
      } else {
        this.aticleList.map(item => {
          item.isCheck = false;
        });
      }
    },
    sortById() {
      if (this.isasc) {
        this.aticleList.sort((a, b) => {
          return a.id - b.id;
        });
        this.isasc = false;
      } else {
        this.aticleList.sort((a, b) => {
          return b.id - a.id;
        });
        this.isasc = true;
      }
    }
  },
  created() {
    // this.$http.get("/v1/test/getArticle").then(res => {
    //   console.log(res);
    //   // this.aticleList = res.data.rows;
    //   this.aticleList = res.data.data.list;
    // });
    this.updatatable();
  },
  computed: {}
};
</script>

<style scoped>
.box {
  width: 96%;
  height: 100%;
  background: rgb(238, 238, 238);
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.square {
  width: 100%;
  height: 60px;
  background: #fff;
  margin-bottom: 10px;
  border-radius: 10px;
}
.title {
  display: flex;
  background: #e2e2e2;
  padding: 0 10px;
  border-radius: 10px;
}
.title-item {
  flex: 1;
  height: 50px;
  line-height: 50px;
  color: royalblue;
}
.body {
  display: flex;
  padding: 0 10px;
  border-block: 1px solid #ccc;
}
.body-item {
  flex: 1;
  height: 50px;
  line-height: 50px;
}
.dialog {
  position: fixed;
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;
  background: #fff;
  z-index: 100;
  left: 50%;
  /* top: 50%; */
  margin-left: -200px;
  /* transform: translate(-50%, -50%); */
}
.dialog-title {
  width: 95%;
  background: #e2e2e2;
  padding: 0 10px;
  height: 50px;
  line-height: 50px;
  text-align: right;
}
.dialog-body {
  height: 50px;
}
.dialog-item {
  display: flex;
  margin: 10px;
  height: 30px;
}
.lable {
  flex: 1;
  line-height: 30px;
}
.ipt {
  flex: 3;
  height: 30px;
  border: 1px solid #ccc;
}
.btn {
  margin: 8px;
}
.btn-box {
  flex: 1;
  display: flex;
  align-items: center;
  text-align: center;
}
.add-btn {
  width: 70px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  margin: 10px;
  background: rgb(106, 116, 255);
  cursor: pointer;
}
.del-btn {
  width: 70px;
  height: 30px;
  line-height: 30px;
  border-radius: 5px;
  margin: 10px;
  background: rgb(255, 102, 102);
  cursor: pointer;
}
.finditem {
  display: flex;
  margin: 10px;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.3s;
  opacity: 1;
  transform: scale(1);
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
  transform: scale(0.3);
}
.page {
  display: inline-block;
  width: 32px;
  height: 28px;
  line-height: 28px;
  margin: 5px 5px;
  background-color: #f4f4f5;
  color: #606266;
  text-align: center;
  border-radius: 2px;
  cursor: pointer;
}
.page-active {
  background: #1890ff;
  color: #fff;
}
</style>